<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back" @click="navigateBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">添加车辆</view>
			<view class="right">
				<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="bg"></view>

		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 顶部图片 -->
			<image class="top-image" src="/static/whb/carbg.jpg" mode="aspectFit"></image>

			<!-- 品牌选择 -->
			<view class="form-item">
				<view class="label">品牌</view>
				<picker @change="handleBrandChange" :value="brandIndex" :range="brandList" range-key="name" class="input-content">
					<view class="picker-content">{{ brandList[brandIndex]?.name || '请选择品牌' }}</view>
				</picker>
			</view>

			<!-- 车型选择 -->
			<view class="form-item">
				<view class="label">车型</view>
				<picker @change="handleTypeChange" :value="typeIndex" :range="typeList" range-key="name" :disabled="!brandList[brandIndex]" class="input-content">
					<view class="picker-content">{{ typeList[typeIndex]?.name || '请选择车型' }}</view>
				</picker>
			</view>

			<!-- 颜色选择 -->
			<view class="form-item">
				<view class="label">颜色</view>
				<picker @change="handleColorChange" :value="colorIndex" :range="colorList" range-key="color" :disabled="!brandList[brandIndex]" class="input-content">
					<view class="picker-content">{{ colorList[colorIndex]?.color || '请选择颜色' }}</view>
				</picker>
			</view>

			<!-- 车牌号码 -->
			<view class="form-item">
				<view class="label">车牌号码</view>
				<input class="input-content" v-model="carNum" placeholder="请输入您的车牌号" maxlength="7" />
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<button class="submit-btn" @click="handleSubmit">
				<text>确认添加</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 响应式数据
	const userId = ref('');
	const brandList = ref([]);
	const typeList = ref([]);
	const colorList= ref([]);
	const brandIndex = ref(0);
	const typeIndex = ref(0);
	const colorIndex = ref(0);
	const carNum = ref('');

	// 获取品牌列表
	const fetchBrandList = () => {
		uni.request({
			url: 'http://localhost:9402/carBrand/listAll',
			method: 'GET',
			header: {
				'Authorization': uni.getStorageSync('Token'),
				'permissions': 'user:carinfo:list'
			},
			success: (res) => {
				if (res.statusCode === 200 && res.data.code === 200) {
					brandList.value = res.data.data || [];
				} else {
					uni.showToast({
						title: res.data.msg || '获取品牌列表失败',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				console.error('获取品牌列表失败:', err);
				uni.showToast({
					title: '获取品牌列表失败',
					icon: 'none'
				});
			}
		});
	};

	// 获取车型列表
	const fetchTypeList = () => {
		uni.request({
			url: 'http://localhost:9402/carType/listAll',
			method: 'GET',
			header: {
				'Authorization': uni.getStorageSync('Token'),
				'permissions': 'user:carinfo:list'
			},
			success: (res) => {
				if (res.statusCode === 200 && res.data.code === 200) {
					// console.log('车型列表数据:', res.data.data);
					typeList.value = res.data.data || [];
					typeIndex.value = 0;
					colorList.value = res.data.data || [];
					colorIndex.value = 0;
				} else {
					uni.showToast({
						title: res.data.msg || '获取车型列表失败',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				console.error('获取车型列表失败:', err);
				uni.showToast({
					title: '获取车型列表失败',
					icon: 'none'
				});
			}
		});
	};

	// 品牌选择改变
	const handleBrandChange = (e) => {
		brandIndex.value = e.detail.value;
		const brandId = brandList.value[brandIndex.value]?.id;
		if (brandId) {
			// 根据品牌ID筛选车型
			typeList.value = typeList.value.filter(type => type.bid === brandId);
			typeIndex.value = 0;
		}
	};

	// 车型选择改变
	const handleTypeChange = (e) => {
		typeIndex.value = e.detail.value;
	};
	
	// 颜色选择改变
	const handleColorChange = (e) => {
		colorIndex.value = e.detail.value;
	};

	// 提交表单
	const handleSubmit = () => {
		if (!userId.value) {
			uni.showToast({
				title: '用户ID不能为空',
				icon: 'none'
			});
			return;
		}
		if (!brandList.value[brandIndex.value]) {
			uni.showToast({
				title: '请选择品牌',
				icon: 'none'
			});
			return;
		}
		if (!typeList.value[typeIndex.value]) {
			uni.showToast({
				title: '请选择车型',
				icon: 'none'
			});
			return;
		}
		if (!colorList.value[colorIndex.value]) {
			uni.showToast({
				title: '请选择颜色',
				icon: 'none'
			});
			return;
		}
		if (!carNum.value) {
			uni.showToast({
				title: '请输入车牌号',
				icon: 'none'
			});
			return;
		}

		const carData = {
			uid: userId.value,
			typeId: typeList.value[typeIndex.value].id,
			carNum: carNum.value,
			defaultCar: 0,
			color: colorList.value[colorIndex.value].color
		};

		uni.request({
			url: 'http://localhost:9402/carinfo',
			method: 'POST',
			header: {
				'Authorization': uni.getStorageSync('Token'),
				'permissions': 'user:carinfo:add'
			},
			data: carData,
			success: (res) => {
				if (res.statusCode === 200 && res.data.code === 200) {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/my/mycar/AddSuccess?id=${userId.value}`
						});
					}, 1500);
				} else {
					uni.showToast({
						title: res.data.msg || '添加失败',
						icon: 'none'
					});
				}
			},
			fail: () => {
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
			}
		});
	};

	// 返回上一页
	const navigateBack = () => {
		uni.navigateBack();
	};

	// 页面加载
	onLoad((options) => {
		if (options.id) {
			userId.value = options.id;
			console.log('接收到的用户ID:', userId.value);
		} else {
			uni.showToast({
				title: '缺少用户ID参数',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
		// 获取品牌和车型列表
		fetchBrandList();
		fetchTypeList();
	});
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 100px;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 44px;
		background-color: #007AFF;
		color: #fff;
		padding: 0 15px;
	}

	.nav-bar .back,
	.nav-bar .right {
		width: 44px;
	}

	.nav-bar .title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
	}

	.nav-bar .right {
		text-align: right;
	}

	.bg {
		width: 100%;
		height: 250rpx;
		background-color: #007AFF;
	}

	.form-content {
		margin: 10px 10px 0;
		margin-top: -200rpx;
		border-radius: 20px 20px 0 0;
		padding: 20px 0 20px 0;
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	.form-content .top-image {
		width: 100%;
		height: 120px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		padding: 0 20px;
	}

	.form-item .label {
		min-width: 90px;
		max-width: 90px;
		text-align: center;
		padding: 8px 0;
		background-color: #238CFE;
		color: #fff;
		border-radius: 20px;
		font-size: 15px;
		margin-right: 12px;
	}

	.form-item .input-content,
	.form-item .picker-content {
		flex: 1;
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
		background-color: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 22px;
		font-size: 15px;
		color: #333;
	}

	.form-item .input-content::placeholder,
	.form-item .picker-content::placeholder {
		color: #999;
	}

	.form-item .upload-box {
		width: 120px;
		height: 120px;
		background-color: #f5f5f5;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
	}

	.form-item .upload-box .preview-image {
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}

	.form-item .upload-box .upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		font-size: 14px;
	}

	.form-item .upload-box .upload-placeholder .plus {
		font-size: 24px;
		margin-bottom: 5px;
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}

	.bottom-btn .submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 44px;
		background-color: #007AFF;
		color: #fff;
		border-radius: 22px;
		font-size: 16px;
	}

	.bottom-btn .submit-btn:active {
		opacity: 0.8;
	}

	.car-preview {
		display: flex;
		align-items: center;
		padding: 15px;
		background-color: #f8f8f8;
		border-radius: 12px;
		margin-top: 10px;
	}

	.car-preview .car-image {
		width: 100px;
		height: 100px;
		border-radius: 8px;
		margin-right: 15px;
		object-fit: cover;
	}

	.car-preview .car-info {
		flex: 1;
	}

	.car-preview .car-info .car-name {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.car-preview .car-info .car-color {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666;
	}

	.car-preview .car-info .car-color .color-dot {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		margin-right: 8px;
		border: 1px solid #ddd;
	}
</style>